<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html lang="zh-cn">
<head>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<!--引入头部样式  -->
	<jsp:include page="header.jsp"></jsp:include>
	<section class="pro-list">
		<!-- 产品列表 -->
		<aside class="pro-leftsidebar">
			<ul>
				<li><a>产品搜索</a>
					<ul id="pro-search">
						<li>
							<form method="post" action="ProServlet?method=getProByType">
								<input type="text" style="color: white" name="proname"
									class="pro-search">
								<button type="submit"
									class="layui-btn layui-btn-xs  layui-btn-primary">搜索</button>
							</form>
						</li>
					</ul></li>
				<li><a>产品分类</a>
					<ul id="pro-category">
						<c:forEach items="${protype}" var="obj">
							<li><a
								href="ProducttypeServlet?method=proType&protype=${obj.zhuid }">${obj.typename}</a></li>
						</c:forEach>
					</ul></li>
			</ul>
		</aside>
		<!-- 产品列表end -->

		<!-- 产品详情 -->
		<aside class="pro-rightsidebar">
			<header>
				<p></p>
				<span>椅子系列</span>
				<div class="product-nav">
					<a href="index.html">首页 </a>&#62;<a href="#">产品展示</a>&#62;<a>${pro.name }</a>
				</div>
			</header>
			<main>
			<div class="pro-right-left">
				<div class="pro-details-img">
					<img src="${pro.picurl}">
				</div>
				<div class="pro-detalis-carousel">
					<div class="am-slider am-slider-default am-slider-carousel"
						data-am-flexslider="{itemWidth: 112, itemMargin: 4,move:5,  controlNav: false ,  slideshow: true}">
						<ul class="am-slides pro-details">
							<c:forEach items="${imglist }" var="obj">
								<li><img src="${obj.url }" /></li>
							</c:forEach>
						</ul>
					</div>
				</div>

			</div>
			<div class="pro-right-right">
				<ul class="pro-right-info-constant">
					<li>产品名称:</li>
					<li>产品材质:</li>
					<li>产品售价:</li>
					<li>市场价:</li>
				</ul>
				<ul class="pro-right-info-variable">
					<li>${pro.name }</li>
					<li>${pro.material }</li>
					<li>${pro.price }</li>
					<li>${pro.price }</li>
				</ul>

			</div>

			<div class="am-tabs pro-tabs" data-am-tabs>
				<ul class="am-tabs-nav am-nav am-nav-tabs">
					<li class="am-active"><a href="#tab1">详细说明1</a></li>
				</ul>
				<div class="am-tabs-bd">
					<div class="am-tab-panel am-active" id="tab1">
						<ul>
							<li><span class="pro-tabs-constant">品牌:</span> <span
								class="pro-tabs-variable">${pro.brand }</span></li>
							<li><span class="pro-tabs-constant">是否组装:</span> <span
								class="pro-tabs-variable">${pro.zuzhuang }</span></li>

							<li><span class="pro-tabs-constant">是否可定制:</span> <span
								class="pro-tabs-variable">${pro.dingzhi }</span></li>
							<li><span class="pro-tabs-constant">型号:</span> <span
								class="pro-tabs-variable">000000</span></li>
							<li><span class="pro-tabs-constant">颜色分类:</span> <span
								class="pro-tabs-variable">${pro.color }</span></li>
							<li><span class="pro-tabs-constant">设计元素:</span> <span
								class="pro-tabs-variable">大师设计</span></li>
							<li><span class="pro-tabs-constant">风格:</span> <span
								class="pro-tabs-variable">${pro.style }</span></li>
							<li><span class="pro-tabs-constant">款式定位:</span> <span
								class="pro-tabs-variable">现代</span></li>
						</ul>
					</div>
				</div>
			</main>
		</aside>
		<!-- 产品详情end -->

	</section>

	﻿
	<!-- 引用底部样式 -->
	<jsp:include page="footer.jsp"></jsp:include>
</body>

</html>


